<!-- 全球目的地 -->
<template>
  <div class="box">
    <header class="des-header">
      <h2 class="des-title">全球目的地</h2>
      <span class="des-tip">(按拼音首字母排序)</span>
      <a href="javascript:;" class="add-des">
        <i class="fa fa-plus" aria-hidden="true"></i>
        <span class="add-des-text">添加目的地</span>
      </a>
    </header>

    <div class="des-content-box">
      <div class="des-content-list-box" v-for="(item1,index1) in globalPlace" :key="index1">
        <h4 class="des-content-item-title">{{item1.region}}</h4>
        <ul class="des-content-list">
          <li
            class="des-content-item letter-and-country"
            v-for="(item2,index2) in item1.placeList"
            :key="index2"
          >
            <span class="des-item-letter" v-show="item2.destination != ''">{{item2.letter}}</span>
            <div
              class="des-item-country-box"
              v-for="(item3,index3) in item2.destination"
              :key="index3"
            >
              <a href="javascript:;" class="des-item-country-list">
                <span class="des-item-country-ch">{{item3.chinese}}</span>
                <span class="des-item-country-en">{{item3.english}}</span>
              </a>
              <span class="des-item-country-ishot" v-show="item3.isHot">hot</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import vuex, { mapState } from "vuex";
export default {
  data() {
    return {};
  },

  components: {},
  computed: {
    ...mapState(["globalPlace"])
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$store.dispatch("reqGlobalPlace");
    }
  }
};
</script>
<style scoped lang="stylus" ref="stylesheet/stylus">
.box {
  width: 1000px;
  margin: 40px auto;
  color: #666666;

  .des-header {
    display: flex;
    align-items: flex-end;
    margin-bottom: 25px;

    .des-title {
      font-size: 32px;
      font-weight: normal;
    }

    .des-tip {
      font-size: 14px;
      color: #a8a8a8;
      padding: 0 25px 0 10px;
    }

    .add-des {
      color: #ff9d00;
      font-size: 14px;

      &:hover {
        .add-des-text {
          text-decoration: underline;
        }
      }
    }
  }

  .des-content-box {
    .des-content-list-box:nth-of-type(1) {
      ul {
        height: 510px;
      }
    }

    .des-content-list-box:nth-of-type(2) {
      ul {
        height: 190px;
      }
    }

    .des-content-list-box:nth-of-type(3) {
      ul {
        height: 130px;
      }
    }

    .des-content-list-box:nth-of-type(4) {
      ul {
        height: 517px;
      }
    }

    .des-content-list-box:nth-of-type(5) {
      ul {
        height: 720px;
      }
    }

    .des-content-list-box:nth-of-type(6) {
      ul {
        height: 140px;
      }
    }

    .des-content-item-title {
      font-weight: normal;
      font-size: 20px;
      margin-bottom: 15px;
    }

    .des-content-list {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      margin-bottom: 50px;

      .des-content-item {
        line-height: 30px;
        width: 33%;
      }

      .letter-and-country {
        .des-item-letter {
          font-size: 20px;
          font-family: Centaur, Times New Roman;
          position: absolute;
        }

        .des-item-country-box {
          position: relative;
          left: 25px;

          .des-item-country-list {
            font-size: 14px;

            &:hover {
              text-decoration: underline;
            }

            .des-item-country-en {
              color: #a8a8a8;
            }
          }

          .des-item-country-ishot {
            color: #ffffff;
            display: inline-block;
            background-color: #ff9d00;
            font-style: italic;
            font-weight: bold;
            width: 32px;
            text-align: center;
            line-height: 14px;
            font-size: 14px;
            margin-left: 10px;
            position: relative;

            &:before {
              content: '';
              position: absolute;
              left: -14px;
              top: 0;
              border-width: 7px;
              border-style: solid;
              border-color: transparent #ff9d00 transparent transparent;
            }
          }
        }
      }
    }
  }
}
</style>